<!--
 * @Description: 编辑Overlay编排
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-07-17 09:04:06
 * @LastEditTime: 2021-10-22 17:27:43
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="overlay-content">
    <div class="info">
      <h1 class="title">编辑Overlay编排</h1>
      <el-form :model="form" class="form" :rules="rules" ref="overlayForm" label-width="100px">
        <!-- 名称 -->
        <el-form-item label="名称" prop="userlabel" key="userlabel">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.userlabel" maxlength="100" />
          </el-col>
        </el-form-item>
        <!-- 类型 -->
        <el-form-item label="类型" prop="type" key="type">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.type" style="width: 100%;">
              <el-option value="Hub" label="HubSpoke"></el-option>
              <el-option value="full" label="FullMesh"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <!-- 租户 -->
        <el-form-item label="租户" prop="dgId" key="dgId">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.dgId" style="width: 100%;" disabled>
              <el-option
                v-for="(item, index) in tenant"
                :key="index"
                :value="item.id"
                :label="item.userlabel"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <!-- VPN -->
        <el-form-item label="VPN" prop="vpnId" key="vpnId">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.vpnId" style="width: 100%;">
              <el-option
                v-for="(item, index) in vpnls"
                :key="index"
                :value="item.vpnId"
                :label="item.vpnName"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <template v-if="form.type === 'Hub'">
          <!-- 中心站点 - 主 -->
          <el-form-item
            label="主中心站点"
            prop="main"
            key="main"
            :rules="{required: true, message: '请选择中心站点', trigger: 'change'}"
          >
            <el-col :xs="24" :sm="12" :lg="6">
              <el-select v-model="form.main" filterable style="width: 100%;">
                <el-option
                  v-for="(item, index) in subls"
                  :key="index"
                  :value="item.id"
                  :label="item.sitename"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <!-- 中心站点 - 备 -->
          <el-form-item label="备中心站点" prop="another" key="another">
            <el-col :xs="24" :sm="12" :lg="6">
              <el-select v-model="form.another" filterable clearable style="width: 100%;">
                <el-option
                  v-for="(item, index) in subls"
                  :key="index"
                  :value="item.id"
                  :label="item.sitename"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </template>
        <!-- 分支站点 -->
        <el-form-item label="分支站点" prop="fullSites" key="fullSites">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.fullSites" multiple filterable style="width: 100%;">
              <el-option
                v-for="(item, index) in sitels"
                :key="index"
                :value="item.id"
                :label="item.sitename"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 90px" @click="cancel">返回</el-button>
          <el-button type="primary" style="width: 90px" @click="submitForm('overlayForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  props: ['tenant', 'overlay'],
  data () {
    return {
      vpnls: [],
      subls: [],
      sitels: [],
      form: {},
      rules: {
        userlabel: [{
          required: true,
          message: '请填写名称',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请选择类型',
          trigger: 'change'
        }],
        dgId: [{
          required: true,
          message: '请选择租户',
          trigger: 'change'
        }],
        vpnId: [{
          required: true,
          message: '请选择VPN',
          trigger: 'change'
        }],
        fullSites: [{
          type: 'array',
          required: true,
          message: '请至少选择一个分支站点',
          trigger: 'change'
        }],
      }
    };
  },
  created () {
    let _this = this;
    Promise.all([
      // 获取HubCPE站点
      _this.$http.post({
        url: '/api/sdwan/overlay/sites',
        data: {
          dgId: _this.overlay.dgId,
          hub: true
        }
      }),
      // 获取CPE站点
      _this.$http.post({
        url: '/api/sdwan/overlay/sites',
        data: {
          dgId: _this.overlay.dgId,
          hub: false
        }
      }),
      // 获取VPN
      _this.$http.get({ url: '/api/sdwan/overlay/vpns/' + _this.overlay.dgId })
    ]).then(res => {
      _this.subls = res[0].resultBody;
      _this.sitels = res[1].resultBody;
      _this.vpnls = res[2].resultBody;
      let result = {
        id: _this.overlay.id,
        userlabel: _this.overlay.userlabel,
        type: _this.overlay.type,
        dgId: _this.overlay.dgId,
        dgName: _this.overlay.dgName,
        vpnId: _this.overlay.vpnId,
        vpnName: _this.overlay.vpnName,
        main: _this.overlay.type === 'Hub' ? _this.overlay.hubSites.find(it => { return it.type === 'main' }).siteId : null,
        another: _this.overlay.type === 'Hub' && _this.overlay.hubSites.length === 2 ? _this.overlay.hubSites.find(it => { return it.type === 'another' }).siteId : null
      };
      // 分支站点
      let arry = [];
      _this.overlay.fullSites.map(item => { arry.push(item.siteId) });
      result.fullSites = arry;
      _this.form = result;
    });
  },
  methods: {
    // 返回
    cancel () {
      let _this = this;
      _this.$emit('handleChange', 0);
      _this.$parent.refresh();
    },
    // 提交表单
    submitForm (formName) {
      let _this = this;
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          if (_this.form.type === 'Hub' && _this.form.main === _this.form.another) {
            _this.$message.error('主备中心站点不能相同！');
          } else {
            // Overlay参数
            let params = {
              id: _this.form.id,
              userlabel: _this.form.userlabel,
              dgId: _this.form.dgId,
              dgName: _this.form.dgName,
              vpnId: _this.form.vpnId,
              type: _this.form.type,
              hubSites: [],
              fullSites: []
            };
            // 判断类型
            if (_this.form.type === 'Hub') {
              // 中心站点
              _this.subls.map(item => {
                if (item.id === _this.form.main) {
                  params.hubSites.push({
                    siteId: item.id,
                    siteName: item.sitename,
                    type: 'main'
                  });
                }
                if (item.id === _this.form.another) {
                  params.hubSites.push({
                    siteId: item.id,
                    siteName: item.sitename,
                    type: 'another'
                  });
                }
              });
            }
            // FullMesh
            _this.sitels.map(item => {
              _this.form.fullSites.map(it => {
                if (it === item.id) {
                  params.fullSites.push({
                    siteId: item.id,
                    siteName: item.sitename
                  });
                }
              });
            });
            // 更新请求
            _this.$http.post({
              url: '/api/sdwan/overlay/update',
              data: params,
              loading: true
            }).then(res => {
              let { status } = res;
              if (status === '0') {
                _this.$message.success('更新成功！');
                _this.resetForm(formName);
                _this.cancel();
                _this.$parent.refresh();
              }
            });
          }
        } else {
          this.$message.error('请检查必填项！');
          return false;
        }
      });
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields();
      this.form = {
        id: null,
        userlabel: null,
        type: null,
        dgId: null,
        dgName: null,
        vpnId: null,
        vpnName: null,
        main: null,
        another: null,
        fullSites: []
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.overlay-content {
  .header {
    background: #fff;
    padding: 30px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .left-wrap {
      .avatar {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
      }

      h2 {
        font-size: 30px;
        margin-top: 20px;
        font-weight: 500;
      }

      p {
        color: #9ca3ae;
        font-size: 14px;
        margin-top: 20px;
        display: none;
      }

      .task {
        margin-top: 30px;
        display: flex;
        align-items: center;

        span {
          color: #9ca3ae;
          font-size: 14px;
          margin-right: 30px;
          margin-left: 8px;
        }
      }
    }

    .right-wrap {
      display: flex;
      align-items: center;

      img {
        width: 230px;
      }
    }
  }

  .info {
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 40px;
      box-sizing: border-box;
    }
  }
}

@media only screen and (max-width: $device-ipad) {
  .ne-content {
    .header {
      padding: 20px 20px;

      .left-wrap {
        .avatar {
          width: 90px;
          height: 90px;
        }

        h2 {
          font-size: 20px;
          margin-top: 20px;
        }

        .task {
          margin-top: 15px;

          .icon {
            width: 2.8em;
            height: 2.8em;
            vertical-align: -0.15em;
          }

          span {
            font-size: 15px;
          }
        }
      }

      .right-wrap {
        display: flex;
        align-items: center;

        img {
          display: none;
        }
      }
    }

    .info {
      .title {
        font-size: 18px;
        padding: 15px 20px;
      }

      .form {
        padding: 30px 20px;
      }
    }
  }
}
</style>